<template>
  <div>
    <el-card class="box-card">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <h3>违禁品报警类型设置</h3>
        <el-button size="small" type="warning" @click="showAdd">添加违禁品</el-button>
      </div>
      <el-table :data="categories" style="width: 100%" :cell-style="tableCellStyle">
        <el-table-column label="分类" min-width="10%" property="category">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>

          </template>
        </el-table-column>
        <el-table-column label="全选" min-width="5%">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.selectAll"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              @change="handleSelectAll(scope.row)"
            />

          </template>
        </el-table-column>
        <el-table-column label="违禁品" min-width="85%">
          <template slot-scope="scope">
            <div>
              <el-table :data="scope.row.items" style="width: 100%">
                <el-table-column prop="name" />
                <el-table-column label="状态">
                  <template slot-scope="itemScope">
                    <el-switch
                      v-model="itemScope.row.status"
                      class="ml-2"
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                      @change="handleSwitchChange(itemScope.row, scope.row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="itemScope">
                    <el-button size="mini" type="primary" @click="showEdit(itemScope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="remove(itemScope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        :current-page="query.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <Modal class="modal" :dialog-visible="dialogVisible" :options="categoryKey" :info="selectedCateInfo" @on-close="closeModal" />
  </div>
</template>

<script>
import { getSettings, updateStatus, deleteCategory } from '@/api/categorySettings'
import Modal from './components/Modal.vue'
import { Message } from 'element-ui'
export default {
  components: {
    Modal
  },
  data() {
    return {
      categories: [],
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      categoryKey: [{ label: '其他', value: 'other' }],
      selectedCateInfo: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    handleSelectAll(category) {
      const status = category.selectAll
      category.items.forEach(function(item) {
        item.status = status
      })
      var params = { status: status, category: category.name }
      updateStatus(params).then(response => {
        if (response.code === 200) {
          Message({
            message: 'success',
            type: 'success',
            duration: 1000
          })
        }
      }
      ).catch(e => {
        console.log(e)
      })
    },
    handleSwitchChange(item, category) {
      // 更新单个违禁品的选中状态
      var selectAllFlag = true
      category.items.forEach(function(item) {
        if (item.status === false) {
          selectAllFlag = false
        }
      })
      category.selectAll = selectAllFlag

      var params = { status: item.status, id: item.id }
      updateStatus(params).then(response => {
        if (response.code === 200) {
          Message({
            message: 'success',
            type: 'success',
            duration: 1000
          })
        }
      }).catch(e => {
        console.log(e)
      })
    },

    async remove(item) {
      var params = { id: item.id }
      this.$confirm('您确定要删除这个违禁品吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteCategory(params).then(res => {
          if (res.code === 200) {
            Message({
              message: '删除成功！',
              type: 'success',
              duration: 3000
            })
            this.loadData()
          }
        })
          .catch(e => {
            console.log(e)
          })
      }).catch(() => {
        Message({
          message: '已取消',
          type: 'info',
          duration: 3000
        })
      })
    },
    // 选中行加深
    tableCellStyle(cel) {
      if (
        cel.row.visible === false
      ) {
        return 'background-color:#ffffff;'
      } else {
        return 'background-color:#f7f7f7;'
      }
    },

    loadData() {
      this.categories = []
      this.categoryKey = [{ label: '其他', value: 'other' }]
      getSettings(this.query).then(response => {
        var data = response.data
        var cateKeys = response.categoryKey
        this.total = response.total

        cateKeys.forEach(value => {
          var tempKey = {
            label: value,
            value: value
          }
          this.categoryKey.push(tempKey)
        })
        Object.keys(data).forEach(key => {
          // 大类名称汇总

          var flag = true
          for (var i = 0; i < data[key].length; i++) {
            if (data[key][i].status === false) {
              flag = false
              break
            }
          }
          var tempCate = {
            name: key,
            selectAll: flag,
            items: data[key]
          }
          this.categories.push(tempCate)
        })
      }).catch(e => {
        console.log(e)
      })
    },

    handleSizeChange(newval) {
      this.query.pageSize = newval
      this.loadData()
    },
    handleCurrentChange(newval) {
      this.query.pageNum = newval
      this.loadData()
    },
    showAdd() {
      this.dialogVisible = true
    },
    showEdit(item) {
      console.log(item)
      this.selectedCateInfo = { selectedOption: item.categoryName, inputValue: item.name, itemId: item.id }
      this.dialogVisible = true
    },
    closeModal(mode) {
      this.dialogVisible = false
      this.selectedCateInfo = {}
      console.log(mode)
      if (mode === 1) {
        this.loadData()
      }
    }
  }
}
</script>
<style scoped>
.box-card {
  margin: 20px;
}

.el-pagination {
  margin-top: 20px;
}
</style>
